<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <a-tabs
        v-model:activeKey="activeKey"
        animated
        @change="change"
        class="user"
      >
        <a-tab-pane key="1">
          <template #tab>
            <span>
              <!-- <SvgIcon name="user" color="#4CC87E" width="14px" height="14px"/> -->
              <UserOutlined />
              用户反馈
            </span>
          </template>
          <!-- Tab 1 -->
          <a-card size="small" :bordered="false" class="box-card marginTop12">
            <template #title>
              <header class="titleHeader">
                <div class="titleLeft">
                  反馈列表
                  <ExclamationCircleOutlined />
                </div>
              </header>
              <!-- <a-row :gutter="16" class="tables"> -->
              <CommonTable
                ref="commonTable"
                :is-select="true"
                :columns="column"
                :isLoading="isLoading"
                :data-source="dataSource"
                :total="dataSource.length"
                @getPageParams="getPageParams"
                @get-table-sort="getTableSort"
                @getSelectColumn="getSelectColumn"
              >
                <!-- <template #bodyCell="{ column }">
                      <template v-if="column.key=='name'">
                        <span>
                          <MailOutlined />
                          3333
                        </span>
                      </template>
                    </template> -->
                <!-- //这里是插槽，用于对表格进行操作，比如数据渲染和操作列的增删改查 -->
                <template v-slot:bodyCell="{ scope }">
                  <span v-if="scope.column.key != 'action'">{{
                    (scope.column.key, scope.value)
                  }}</span>
                  <!-- //这里的action是操作列，判断是否为操作列对其进行修改 -->
                  <span v-else-if="scope.column.key === 'action'">
                    <i
                      class="details"
                      type="primary"
                      @click="onView(scope.record)"
                      >回复</i
                    >
                    <!-- <a-divider type="vertical" /> -->
                    <!-- <a-button @click="onDelete(scope.record.key)">删除</a-button> -->
                  </span>
                  <span v-else-if="scope.record.key === 'tags'">
                    <MailOutlined />
                    {{ scope.record }}
                  </span>
                </template>

                <!-- <template #bodyCell="{ column, text, record }">
                      <template v-if="column.dataIndex === 'name'">
                        <div class="editable-cell">
                          <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
                            <a-input class="editable-cell-input" v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
                            <CheckOutlined class="editable-cell-icon-check" @click="save(record.key)" />
                          </div>
                          <div v-else class="editable-cell-text-wrapper">
                            {{ text || ' ' }}
                            <EditOutlined class="editable-cell-icon" @click="edit(record.key)" />
                          </div>
                        </div>
                      </template>
                      <template v-else-if="column.dataIndex === 'operation'">
                        <a-popconfirm
                          v-if="dataSource.length"
                          title="Sure to delete?"
                          @confirm="onDelete(record.key)"
                        >
                          <a>Delete</a>
                        </a-popconfirm>
                        <a @click="onView(record)">查看详情</a>
                      </template>
                    </template> -->
              </CommonTable>
              <!-- </a-row> -->
            </template>
          </a-card>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span>
              <!-- <SvgIcon name="my" color="#4CC87E" width="14px" height="14px"/> -->
              <MailOutlined />
              我的反馈
            </span>
          </template>
          <!-- Tab 2 -->
          <a-card size="small" :bordered="false" class="box-card marginTop12">
            <template #title>
              <header class="titleHeader">
                <div class="titleLeft">
                  反馈列表
                  <ExclamationCircleOutlined />
                </div>
              </header>
              <!-- <a-row :gutter="16" class="marginTop12"> -->
              <CommonTable
                ref="commonTable"
                :is-select="true"
                :columns="column2"
                :isLoading="isLoading"
                :data-source="dataSource"
                :total="dataSource.length"
              >
                <template v-slot:bodyCell="{ scope }">
                  <span v-if="scope.column.key != 'action'">{{
                    (scope.column.key, scope.value)
                  }}</span>
                  <span v-else-if="scope.column.key === 'action'">
                    <i
                      class="details"
                      type="primary"
                      @click="onView(scope.record)"
                      >查看详情</i
                    >
                  </span>
                  <span v-else-if="scope.record.key === 'tags'">
                    <MailOutlined />
                    {{ scope.record }}
                  </span>
                </template>
              </CommonTable>
              <!-- <CommonTable
                      ref="commonTable"
                      :is-select="true"
                      :columns="column2"
                      :isLoading="isLoading"
                      :data-source="dataSource"
                      :total="dataSource.length"
                      @getPageParams="getPageParams"
                      @get-table-sort="getTableSort"
                      @getSelectColumn="getSelectColumn"
                    >
                      <template v-slot:bodyCell="{ scope }">
                        <span v-if="scope.column2.key!='action'">{{ (scope.column2.key, scope.value) }}</span>
                        <span v-else-if="scope.column2.key==='action'">
                          <i class="details" type="primary" @click="onView(scope.record)">查看详情</i>
                        </span>
                          <span v-else-if="scope.record.key==='tags'">
                            <MailOutlined />
                            {{scope.record}}
                          </span>
                      </template>
                    </CommonTable> -->
              <!-- </a-row> -->
            </template>
          </a-card>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup>
import {
  ExclamationCircleOutlined,
  UserOutlined,
  MailOutlined,
  CheckOutlined,
  EditOutlined,
} from '@ant-design/icons-vue'
import { ref, computed, reactive } from 'vue'
import CommonTable from '../../components/myTable/indexView.vue'
import SvgIcon from '@/components/svgIcon.vue'
import { cloneDeep } from 'lodash-es'
const activeKey = ref('2')
const change = () => {
  if (activeKey.value == '2') {
    columns.value = ref(column2)
  } else {
    columns.value = ref(column)
  }
}
// const column = ref([
//   {
//     title: 'name',
//     dataIndex: 'name',
//     key: 'name',
//     resizable: true,
//     width: 150,
//   },
//   {
//     title: 'Age',
//     dataIndex: 'age',
//     key: 'age',
//     resizable: true,
//     width: 100,
//     minWidth: 100,
//     maxWidth: 200,
//   },
//   {
//     title: 'Address',
//     dataIndex: 'address',
//     key: 'address',
//   },
//   {
//     title: 'Tags',
//     key: 'tags',
//     dataIndex: 'tags',
//   },
//   {
//     title: 'action',
//     key: 'action',
//     dataIndex: 'action',
//   },
//   {
//     title: 'renderArr',
//     key: 'renderArr',
//     dataIndex: 'renderArr',
//   },
// ]);

const column = [
  {
    title: '用户ID',
    width: 60,
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '游戏名称',
    width: 100,
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '反馈时间',
    dataIndex: 'address',
    key: 'tags',
    width: 100,
  },
  {
    title: '反馈类型',
    dataIndex: 'address',
    key: '2',
    width: 100,
  },
  {
    title: '问题描述',
    dataIndex: 'address',
    key: '3',
    width: 100,
  },
  {
    title: '反馈信息',
    dataIndex: 'address',
    key: '4',
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'action',
    width: 100,
  },
].map(item => ({
  ...item,
  align: 'center', // 居中
  resizable: true, // 可否伸缩
  maxWidth: 200, // 可伸缩最大宽度
  minWidth: 75, // 可伸缩最小宽度
  sorter: false, // 可否排序
}))
const column2 = [
  {
    title: '1用户ID',
    width: 60,
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '1游戏名称',
    width: 100,
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '1反馈时间',
    dataIndex: 'address',
    key: 'tags',
    width: 100,
  },
  {
    title: '1反馈类型',
    dataIndex: 'address',
    key: '2',
    width: 100,
  },
  {
    title: '1问题描述',
    dataIndex: 'address',
    key: '3',
    width: 100,
  },
  {
    title: '1反馈信息',
    dataIndex: 'address',
    key: '4',
    width: 100,
  },
  {
    title: '1操作',
    dataIndex: 'operation',
    key: 'action',
    width: 100,
  },
].map(item => ({
  ...item,
  align: 'center', // 居中
  resizable: true, // 可否伸缩
  maxWidth: 200, // 可伸缩最大宽度
  minWidth: 75, // 可伸缩最小宽度
  sorter: false, // 可否排序
}))

// const data = ref([
//   {
//     key: '1',
//     name: 'John Brown',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//   },
//   {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//   },
//   {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//   },
//   {
//     key: 'action',
//     name: 'action',
//     age: 32,
//     address: 'action',
//     renderArr: ['cool', 'teacher'],
//   },
//   {
//     key: 'renderArr',
//     name: 'renderArr',
//     age: 32,
//     address: 'renderArr',
//     renderArr: ['cool', 'teacher'],
//   },
// ])
const data = []
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
    tags: ['cool', 'teacher'],
  })
}
// 注意这里的columns必须是响应式数据,不然无法伸缩列
let columns = ref(column)
const dataSource = ref(data)
const isLoading = ref(false)
const commonTable = ref(null)

// 清空选择
const clearChecked = () => {
  commonTable.value.clear()
}
// 回到第一页(查询使用)
const searchDatas = () => {
  commonTable.value.backFirstPage()
}
// 获取分页数据
const getPageParams = (start, length) => {
  console.log('分页数据：', start, length)
}
// 获取所选项的数据
const getSelectColumn = rows => {
  console.log('选择的数据：', rows)
}
// 获取排序数据
const getTableSort = sorter => {
  if (sorter.order) {
    sorter.order == 'ascend' ? console.log('升序') : console.log('降序')
    console.log('排序表头字段：', sorter.field)
  } else {
    console.log('默认顺序----')
  }
  console.log('排序数据：', sorter)
}

// const edit =(column,data)=>{
//   console.log(column,'column');
//   console.log(data,'data');
// }

const count = computed(() => dataSource.value.length + 1)
const editableData = reactive({})
const edit = key => {
  editableData[key] = cloneDeep(
    dataSource.value.filter(item => key === item.key)[0],
  )
}
const save = key => {
  Object.assign(
    dataSource.value.filter(item => key === item.key)[0],
    editableData[key],
  )
  delete editableData[key]
}
const onDelete = key => {
  dataSource.value = dataSource.value.filter(item => item.key !== key)
}
const onView = item => {
  console.log(item, 'ivew-item')
}
const handleAdd = () => {
  const newData = {
    key: `${count.value}`,
    name: `Edward King ${count.value}`,
    age: 32,
    address: `London, Park Lane no. ${count.value}`,
  }
  dataSource.value.push(newData)
}
</script>
<style lang="less" scoped>
@import url('./index.less');
</style>
<style lang="less">
.user {
  color: #6e6e6e;
  .ant-tabs-ink-bar {
    background-color: #29834a;
  }
  .ant-tabs-nav .ant-tabs-tab-active {
    color: #4cc87e;
  }
}
</style>
